<template>
  <div class="goods_list">
    <header>
      <div class="header_td">
        <div class="inp">
          <i></i>
          <input type="text" placeholder="搜索商品信息" />
        </div>
        <div class="toggle" @click="toggle">
          <img src="../../assets/icon/common/fang.png" alt="" v-if="isShow" />
          <img src="../../assets/icon/common/list.png" alt="" v-else />
        </div>
      </div>
      <div class="header_dd">
        <div class="name" @click='goCategory'><span style="color: #fc4141">{{title}}</span></div>
        <div class="price" @click="clickPriceOrder">
          <span>价格</span>
          <div class="icon">
            <img
              src="../../assets/icon/common/order_0.png"
              :class="clickPrice == 0 ? 'active' : ''"
              alt=""
            />
            <img
              src="../../assets/icon/common/order_asc.png"
              :class="clickPrice == 1 ? 'active' : ''"
              alt=""
            />
            <img
              src="../../assets/icon/common/order_desc.png"
              :class="clickPrice == 2 ? 'active' : ''"
              alt=""
            />
          </div>
        </div>
        <div class="salse" @click="clickSalesOrder">
          <span>销量</span>
          <div class="icon">
            <img
              src="../../assets/icon/common/order_0.png"
              :class="clickSales == 0 ? 'active' : ''"
              alt=""
            />
            <img
              src="../../assets/icon/common/order_asc.png"
              :class="clickSales == 1 ? 'active' : ''"
              alt=""
            />
            <img
              src="../../assets/icon/common/order_desc.png"
              :class="clickSales == 2 ? 'active' : ''"
              alt=""
            />
          </div>
        </div>
        <div :class="['new', news == 1 ? 'active' : '']" @click="clickNew">
          <span>新品</span>
        </div>
      </div>
    </header>

    <div class="loading" v-if="isloading">
      <img src="../../assets/icon/common/shuaxin.png" alt="" class="rr" />
    </div>

    <div class="com" v-else>
      <ul class="fang" v-if="isShow">
        <li v-for="item in list" :key="item.id">
          <a>
            <goods-item-fang
              :id="item.id"
              :cate_id="item.cate_id"
              :image="item.image"
              :price="item.price"
              :sales="item.sales"
              :store_name="item.store_name"
              :vip_price="item.vip_price"
            ></goods-item-fang>
          </a>
        </li>
      </ul>

      <ul class="list" v-else>
        <li v-for="item in list" :key="item.id">
          <a>
            <goods-item
              :id="item.id"
              :cate_id="item.cate_id"
              :image="item.image"
              :price="item.price"
              :sales="item.sales"
              :store_name="item.store_name"
              :vip_price="item.vip_price"
            >
            </goods-item>
          </a>
        </li>
      </ul>
    </div>

     <my-recommend v-if="isGood"></my-recommend>
  </div>
</template>

<script>
import GoodsItemFang from "@/components/goods/GoodsItemFang.vue";
import GoodsItem from "@/components/goods/GoodsItem.vue";
import MyRecommend from "@/components/recommend/Recommend.vue";
export default {
  data() {
    return {
      list: [],
      isShow: true,
      clickPrice: 0,
      clickSales: 0,
      // 分类id
      sid:0,
      // 标题
      title:"",
      // 价格升降序
      priceOrder: "",
      // 销量升降序
      salesOrder: "",
      // 新品
      news: 0,
      //
      isloading: false,

      // 
      isGood:false,
    };
  },
  watch:{
    list(newValue,oldValue){
        //  this.isGood = false

        // 加载图片消失才显示
        if(newValue.length == 0 && this.isloading == false){
            this.isGood = true
        }else{
            this.isGood = false
        }

        
    }
  },
  mounted() {
    document.querySelector("body").style.backgroundColor = "#f5f5f5";
  },
  components: {
    GoodsItemFang,
    GoodsItem,
     MyRecommend,
  },
  created() {
    this.sid = this.$route.query.id
    this.title = this.$route.query.title
   
    this.initSearchData();
  },
  methods: {
    initSearchData() {
      //   let priceOrder2 = priceOrder == undefined ? null : priceOrder;
      //   let salesOrder2 = salesOrder == undefined ? null : salesOrder;

      // this.getSearch(null)
      let url = "/api/products";

      let loading = localStorage.getItem("loading");

      if (loading) {
        //   this.$emit("openLoading", loading);
        this.isloading = loading;
      }

      let pro = axios
        .get(url, {
          params: {
            page: 1,
            limit: 20,
            sid:this.sid,
            keyword: "",
            priceOrder: this.priceOrder,
            salesOrder: this.salesOrder,
            news: this.news,
          },
        })
        .then((response) => {
          let { status, data } = response.data;
          if (status == 200) {
            setTimeout(() => {
              loading = false;
              this.isloading = loading;
              localStorage.setItem("loading", loading);
              //   this.$store.commit("search/getSearch", data);
              this.list = data;
            }, 100);
          }
        })
        .catch((err) => {
          console.log("搜索数据获取失败");
        });
    },

    toggle() {
      this.isShow = !this.isShow;
    },

    clickPriceOrder() {
      this.isGood = false
      this.clickPrice++;
      if (this.clickPrice > 2) {
        this.priceOrder = "";
        this.priceOrder = "";
        this.initSearchData();
        this.clickPrice = 0;
      }

      if (this.clickPrice == 1) {
        this.priceOrder = "asc";
        this.initSearchData();
      }
      if (this.clickPrice == 2) {
        this.priceOrder = "desc";
        this.initSearchData();
      }
      this.salesOrder = "";
      this.clickSales = 0;
    },
    clickSalesOrder() {
      this.isGood = false
      this.clickSales++;
      if (this.clickSales > 2) {
        this.salesOrder = "";
        this.salesOrder = "";
        this.initSearchData();

        this.clickSales = 0;
      }

      if (this.clickSales == 1) {
        this.salesOrder = "asc";
        this.initSearchData();
      }
      if (this.clickSales == 2) {
        this.salesOrder = "desc";
        this.initSearchData();
      }
      this.priceOrder = "";
      this.clickPrice = 0;
    },

    clickNew() {
      this.isGood = false
      if (this.news == 0) {
        this.news = 1;
        this.initSearchData();
      } else {
        this.news = 0;
        this.initSearchData();
      }
    },

    goCategory(){
      this.$router.push('/category')
    }
  },
};
</script>

<style lang="scss" scoped>
/deep/.myRecommend{
  margin-top: -25px;
}

.goods_list {
  padding-top: 86px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  .header_td {
    display: flex;
    height: 43px;
    background-color: #fc4141;
    align-items: center;
    padding: 0 10px;
    justify-content: space-between;
    .inp {
      width: 320px;
      height: 30px;
      border-radius: 15px;
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: 0 12px;

      input {
        width: 250px;
        outline: none;
        border: 0;
        font-size: 14px;
        margin-left: 7px;
      }

      i {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../../assets/icon/common/search_333.png) no-repeat;
        background-size: 100% 100%;
      }
    }

    .toggle {
      width: 25px;
      height: 25px;
      > img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .header_dd {
    height: 43px;
    background-color: #fff;
    display: flex;
    color: #454545;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    > div {
      flex: 1;
      line-height: 43px;
      text-align: center;
    }
    .price,
    .salse {
      position: relative;

      .icon {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        > img {
          width: 100%;
          height: 100%;
          vertical-align: top;
          display: none;
        }
        img.active {
          display: block;
        }
      }
    }
    .new.active span {
      color: #f50;
    }
  }
}

.fang {
  padding: 10px 10px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  li {
    margin-bottom: 12px;
    a {
      display: block;
      .fang_item {
      }
    }
  }
}

.list {
  padding-top: 5px;
  background-color: #fff;
  li {
    padding: 0 0 0 15px;
    margin-top: 23px;
  }
}

.bgRed {
  border-bottom-color: #fc4141;
}
</style>

